<template>
  <el-form :model="skuForm" label-width="100px">
    <el-form-item label="SPU 名称">
      {{ spu.spuName }}
    </el-form-item>
    <el-form-item label="SKU 名称">
      <el-input v-model="skuForm.skuName" placeholder="SKU 名称"></el-input>
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input v-model="skuForm.price" placeholder="SKU 价格" type="number"></el-input>
    </el-form-item>
    <el-form-item label="重量(千克)">
      <el-input v-model="skuForm.weight" placeholder="SKU 重量" type="number"></el-input>
    </el-form-item>
    <el-form-item label="规格描述">
      <el-input v-model="skuForm.skuDesc" placeholder="SKU 规格描述" type="textarea" rows="4"></el-input>
    </el-form-item>
    <el-form-item label="平台属性">
      <el-form inline label-width="100px">
        <el-form-item :label="attr.attrName" v-for="(attr,index) in attrList" :key="attr.id">
          <el-select placeholder="请选择" v-model="attr.attrIdValueId">
            <el-option :label="attrValue.valueName" :value="`${attr.id}:${attrValue.id}`" v-for="(attrValue,index) in attr.attrValueList" :key="attrValue.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-form inline label-width="100px">
        <el-form-item :label="spuSaleAttr.saleAttrName" v-for="(spuSaleAttr,index) in spuSaleAttrList" :key="spuSaleAttr.id">
          <el-select placeholder="请选择" v-model="spuSaleAttr.spuAttrIdValueId">
            <el-option :label="spuSaleAttrValue.saleAttrValueName" :value="`${spuSaleAttr.id}:${spuSaleAttrValue.id}`" v-for="(spuSaleAttrValue,index) in spuSaleAttr.spuSaleAttrValueList" :key="spuSaleAttrValue.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片列表">
      <el-table style="width: 100%" border :data="spuImageList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column label="图片" width="width" align="center">
          <template slot-scope="{row,$index}">
            <img :src="row.imgUrl" :alt="row.imgName" style="width:80px">
          </template>
        </el-table-column>
        <el-table-column prop="imgName" label="名称" width="width" align="center">
        </el-table-column>
        <el-table-column label="操作" width="width" align="center">
          <template slot-scope="{row,$index}">
            <el-button type="primary" size="mini" v-if="row.isDefault === '0'" @click="setDefault(row)">设为默认</el-button>
            <el-tag type="success" v-else>默认</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'SkuForm',
  data () {
    return {
      skuForm: {
        tmId: 0,
        category3Id: 0,
        spuId: undefined,
        price: undefined,
        weight: '',
        skuName: '',
        skuDesc: '',
        skuDefaultImg: '',
        skuAttrValueList: [],
        skuImageList: [],
        skuSaleAttrValueList: []
      },
      spu: {},
      // 存储三个初始化获取的动态数据
      attrList: [],
      spuSaleAttrList: [],
      // 所有的图片列表
      spuImageList: [],
      // 收集的图片列表
      checkedImageList: []
    }
  },
  methods: {
    // 请求获取添加初始化数据
    async initAddSkuFormData (row, category1Id, category2Id) {
      this.spu = row

      const promise1 = this.$API.attr.getList(category1Id, category2Id, row.category3Id)
      const promise2 = this.$API.sku.getSpuSaleAttrList(row.id)
      const promise3 = this.$API.sku.getSpuImageList(row.id)

      const result = await Promise.all([promise1, promise2, promise3])
      this.attrList = result[0].data
      this.spuSaleAttrList = result[1].data
      const spuImageList = result[2].data
      // 默认图片,添加一个 isDefault 属性
      spuImageList.forEach(item => item.isDefault = '0')
      this.spuImageList = spuImageList
    },
    // 收集图片
    handleSelectionChange (val) {
      // 收集图片列表到选中的图片数组当中
      this.checkedImageList = val
    },
    // 设置默认图片
    setDefault (row) {
      this.spuImageList.forEach(item => item.isDefault = '0')
      row.isDefault = '1'
      this.skuForm.skuDefaultImg = row.imgUrl
    },
    // 保存
    async save () {
      let { skuForm, spu, attrList, spuSaleAttrList, checkedImageList } = this
      // 父组件传递过来的数据
      skuForm.tmId = spu.tmId
      skuForm.category3Id = spu.category3Id
      skuForm.spuId = spu.id
      // 整理图片列表
      skuForm.skuImageList = checkedImageList.map(item => {
        return {
          imgName: item.imgName,
          imgUrl: item.imgUrl,
          isDefault: item.isDefault,
          spuImgId: item.id
        }
      })
      // 整理平台属性和销售属性
      skuForm.skuAttrValueList = attrList.reduce((prev, item) => {
        if (item.attrIdValueId) {
          const [attrId, valueId] = item.attrIdValueId.split(':')
          const obj = {
            attrId,
            valueId
          }
          prev.push(obj)
        }
        return prev
      }, [])
      skuForm.skuSaleAttrValueList = spuSaleAttrList.reduce((prev, item) => {
        if (item.spuAttrIdValueId) {
          const [saleAttrId, saleAttrValueId] = item.spuAttrIdValueId.split(':')
          const obj = {
            saleAttrId,
            saleAttrValueId
          }
          prev.push(obj)
        }
        return prev
      }, [])
      // 发请求
      try {
        await this.$API.sku.addUpdate(skuForm)
        this.$message.success('保存成功')
        // 返回列表页
        this.$emit('update:visible', false)
        // 重置 data 数据
        this.resetData()
      } catch (error) {
        this.$message.error('保存失败')
      }
    },
    resetData () {
      this.skuForm = {
        tmId: 0,
        category3Id: 0,
        spuId: undefined,
        price: undefined,
        weight: '',
        skuName: '',
        skuDesc: '',
        skuDefaultImg: '',
        skuAttrValueList: [],
        skuImageList: [],
        skuSaleAttrValueList: []
      }
    },
    // 取消
    cancel () {
      this.$emit('update:visible', false)
      this.resetData()
    }
  }
}
</script>

<style lange="scss" scoped>
</style>